<template>
  <div class="admin-home">
    <el-carousel :interval="5000" type="card" height="200px">
      <el-carousel-item v-for="(item,i) in titleArr" :key="i">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

export default {
  name: 'Index',
  components: {
  },
  data () {
    return {
      msg: '超级管理员看板',
      titleArr:['智慧消防平台 - 系统管理员 - 后台管理系统','请谨慎操作，保持数据和平台的有效性','用科技和智慧，给业主提供最好的保护']
    }
  },
  created () {
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.admin-home{
    width: 100%;
    height: 100%;
    background-image: url('../../../assets/images/home/bg-admin.jpg');
    background-size: cover;
    background-position: 50%;
    position: relative;
}
.el-carousel__item h3 {
    color: #fff;
    font-size: 24px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(odd) {
    background-color: rgba(64, 158, 255, .8);
  }
  .el-carousel__item:nth-child(3n+0) {
    background-color: rgba(245, 108, 108, .8);
  }
  .el-carousel__item:nth-child(even) {
    background-color: rgba(230, 162, 60, .8);
  }
</style>
